<header class="page-title-bar">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active">
          <a href="#">
            <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>Tables</a>
        </li>
      </ol>
    </nav>
    <button type="button" class="btn btn-success btn-floated">
      <span class="fa fa-plus"></span>
    </button>
    <div class="d-md-flex align-items-md-start">
      <h1 class="page-title mr-sm-auto"> Filter Columns </h1>
      <div id="dt-buttons" class="btn-toolbar"></div>
    </div>
</header>
<div class="page-section">
<section class="card card-fluid">
  <header class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active show" data-toggle="tab" href="#tab1">All</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2">Ongoing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab3">Completed</a>
      </li>
    </ul>
  </header>
  <div class="card-body">
    <div class="form-group">
      <div class="input-group input-group-alt">
        <div class="input-group has-clearable">
          <button id="clear-search" type="button" class="close" aria-label="Close">
            <span aria-hidden="true">
              <i class="fa fa-times-circle"></i>
            </span>
          </button>
          <div class="input-group-prepend">
            <span class="input-group-text">
              <span class="oi oi-magnifying-glass"></span>
            </span>
          </div>
          <input id="table-search" type="text" class="form-control" placeholder="Search products"> </div>
        <div class="input-group-append">
          <button class="btn btn-secondary" data-toggle="modal" data-target="#modalFilterColumns">Filter Columns</button>
        </div>
      </div>
    </div>
    <div class="modal fade" id="modalFilterColumns" tabindex="-1" role="dialog" aria-labelledby="modalFilterColumnsLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-overflow" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalFilterColumnsLabel"> Filter Columns </h5>
          </div>
          <div class="modal-body">
            <div id="filter-columns">
              <div class="form-group form-row filter-row">
                <div class="col">
                  <select class="custom-select filter-control filter-column">
                    <option value="1"> 1 </option>
                    <option value="2"> 2 </option>
                    <option value="3"> 3 </option>
                    <option value="4"> 4 </option>
                    <option value="5"> 5 </option>
                  </select>
                </div>
                <div class="col">
                  <select class="custom-select filter-control filter-operator">
                    <option value="contain"> Contain </option>
                    <option value="notcontain"> Not Contain </option>
                    <option value="equal"> Equal to </option>
                    <option value="notequal"> Not equal to </option>
                    <option value="beginwith"> Begin with </option>
                    <option value="endwith"> End with </option>
                    <option value="greaterthan"> Greater than </option>
                    <option value="lessthan"> Less than </option>
                  </select>
                </div>
                <div class="col">
                  <div class="input-group input-group-alt">
                    <input type="text" class="form-control filter-control filter-value rounded mr-2">
                    <div class="input-group-append">
                      <button class="close remove-filter-row">×</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <button id="add-filter-row" class="btn btn-reset my-2">
              <i class="fa fa-plus mr-1"></i> add filter</button>
          </div>
          <div class="modal-footer justify-content-start">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Apply filters</button>
            <button type="button" class="btn btn-light" id="clear-filter">Cancel</button>
          </div>
        </div>
      </div>
    </div>
    <table id="myTable" class="table"><thead></thead></table>
  </div>
</section>
</div>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.bootstrap4.min.css">

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.print.min.js"></script>

<script src="/assets/javascript/pages/datatables-filters.min.js"></script>
<?php require APP_ROOT.'/views/'.APP_THEME.'/modal.phtml';?>